import { $ } from './library/jquery-module.js';
import { cookie } from './library/cookie.js';
import './detailtest.js';

let value, num, price, total = 0;
let shop = cookie.get('shop');

// 事件重置 刷新(重新计算)
function init() {
    total = 0;
    $('.s-price').each((i, el) => {
        num = $('.num-value').eq(i).text();
        price = num * $(el).text();
        total += price;
        $('.a-price').eq(i).text(price);
    });
    $('.total-price').text(total);
}

// 如果有shop 的cookie的话
// 执行 并渲染相对应的购物车 行
if (shop) {
    shop = JSON.parse(shop);

    let idList = shop.map(el => el.id).join();

    $.ajax({
        type: "get",
        url: "../../interface/getItems.php",
        data: { idList },
        dataType: "json",
        success: function(res) {
            let temp = '';

            res.forEach(elm => {
                let picture = JSON.parse(elm.picture);

                let current = shop.filter(val => val.id == elm.id);
                // console.log(current);

                temp += `
                        <ul class="list-inline container-fluid">
                            <li class="img col-md-1">
                                <img src="../${picture[0].src}" alt="">
                            </li>
                            <li class="proname col-md-4">${elm.proname}</li>
                            <li class="price col-md-2">￥<span class="s-price">${current[0].price}</span></li>
                            <li class="num col-md-2 num-btn">
                                <span class="btn btn-default sub" data-id="${elm.id}">-</span>
                                <span class="btn btn-default num-value">${current[0].num}</span>
                                <span class="btn btn-default add" data-id="${elm.id}">+</span>
                            </li>
                            <li class="price col-md-2 total-a">￥<span class="a-price"></span></li>
                            <li class="col-md-1"><span class="btn btn-danger" data-id="${elm.id}">删除</span></li>
                        </ul>
                        `
            });
            $('.shopping').html(temp);
            // 渲染后 重新计算
            init();
        }
    })
}

// 按钮加减
$('.shopping').on({
    'click': function() {
        let nodeId = $(this).attr('data-id');

        switch ($(this).index()) {
            case 0:
                value = $(this).next().text() * 1;
                value > 1 ? value-- : value = 1;
                $(this).next().text(value);
                break;
            case 2:
                value = $(this).prev().text() * 1;
                value++;
                $(this).prev().text(value);

                break;
        }
        // 每次点击后重新计算
        init();
        // 点击后 把shop(cookie) 中的数量改变
        // 该操作是为了在购物车页面增加减少数量时
        // 切换页面后 数量依旧保持不变
        shop.forEach(elm => {
            elm.id === nodeId ? elm.num = value : null;
        });
        // 重新设置cookie值
        cookie.set('shop', JSON.stringify(shop), 1);
    }
}, 'ul > .num-btn > span');

// 删除一行
$('.shopping').on({
    'click': function() {
        // 找到这个的cookie值
        let res = shop.filter(el => el.id != $(this).attr('data-id'));
        cookie.set('shop', JSON.stringify(res), 1); // 将id不为被点击元素id的剩余元素从新写入cookie
        location.reload();
    }
}, 'ul>.col-md-1>.btn-danger');

// 清空购物车
$('#clearall').on('click', function() {
    cookie.remove('shop');
    location.reload();
});